<template>
	<div class="path-Index container">
		<Header></Header>
		<section>
			<ul v-if="list.length">
				<li v-for="(item , index) in list" :key="index" @click="goList(item)">
					<div class='left'>
						<div>
							<span>{{item.name}}</span>
							<span>{{item.tel}}</span>
						</div>
						<div class="city">
							<span class="active" v-text='  item.isDefault == 1 ? "[默认]" : "" ' ></span>
							<span>{{item.province}}</span>
							<span>{{item.city}}</span>
							<span>{{item.county}}</span>
							<span>{{item.addressDetail}}</span>
						</div>
					</div>
					<div class='right'>
						<i class="iconfont icon-next"></i>
					</div>
					
				</li>
			</ul>
			<h1 v-else>暂无数据，请添加...</h1>
			<div class="add-path" @click="goList('add')">添加地址</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import Header from "@/components/path/Header.vue"
	import Tabbar from "@/components/common/Tabbar.vue"
	import { mapState, mapMutations} from "vuex"
	import http from '@/common/api/request.js'
	
	//引入bus
	import bus from '@/common/bus.js'
	
	export default{
		name: "path-Index",
		components:{
		   Header,
		   Tabbar
		},
		data(){
			return{
				pathStatus:false
			}
		},
		created() {
			this.getData(),
			console.log(this.$route.query.type)
			//由订单页面跳转过来
			if( this.$route.query.type == 'select'){
				this.pathStatus = true;
				console.log(this.pathStatus)
			}
			
		},
		computed:{
			...mapState({
				list:state => state.path.list
			})
		},
		methods:{
			...mapMutations(['initData']),
			//获取数据
			getData(){
				http.$axios({
					url:'/api/selectAddress',
					method:'post',
					headers:{
						token:true
					},
				}).then(res=>{
					// console.log(res.data);
					this.initData(res.data)
				})
			},
			//去添加地址
			goList(option){
				// console.log(option)
				if(this.pathStatus){//表示由订单页面跳转过来
					bus.$emit('selectPath',JSON.stringify(option))
					this.$router.back()
					return
				}
				//由地址管理进入
					this.$router.push({
						name:'path-list',
						params:{
							key:option
						}
					})
				
				
			}
		}
	}
</script>

<style scoped lang="less">
	.path-Index{
		width: 100vw;
		section{
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			background-color: #f7f7f7;
			width:100%;
			ul{
				width:100%;
				
				li{ 
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:0.1rem 0.4rem 0.3rem 0.4rem;
					background-color: #ffffff;
					border-bottom:1px solid #ccc;
					
					.left{
						flex: 1;
						
						.city{
							
							span{
								padding-right: 0.1rem;
							}
						}
					}
					.right{
						
						i{
							margin-right:-0.25rem;
							font-size: 0.7rem;
						}
					}
					
					div{
				      font-size:0.4rem;//改写默认的font-size,控制字体大小，影响下面span的行距
						span{
							padding-right:0.4rem ;
							font-size:0.38rem;
						}
					}
					
					.active{
						color:#b0352f;
					}
				}
			}
			
			.add-path{
				margin-top:0.8rem;
				width: 2.5rem;
				line-height: 1rem;
				font-size: 0.4rem;
				text-align: center;
				color:#fff;
				background-color: #b0352f;
				border-radius: 0.25rem;
			}
			
			
		}
		
		/deep/.tabbar{
			border-top:2px solid #ccc;
		}
	}
	
</style>